<template>
<!-- 二维码登录 -->
<div class="erwei">
    <h1 class="title" >微信扫码登录</h1>
      <div class="imgs" v-loading="loading">
         <img width="200px" alt="" :src="qrImg">
         <i class="mask" v-if="showQrMask" :style="maskBg" @click="updataQr"></i>
      </div>
      <p>
        <svg aria-hidden="true" class="icon-wx">
           <use xlink:href="#icon-weixin"></use>
        </svg>
        <b>扫描二维码</b>
      </p>
   </div>
</template>
<script>
//引入socket.io
import socketIo from 'socket.io-client'
//引入qrcode
import qrcode from 'qrcode'
//引入api
import * as api from '@/api/users'
//引入成功和失败遮图片
import invalidImg from '@/assets/img/invalidQr.png'
import scancodeImg from '@/assets/img/scancode.png'

import storage from '@/utils/storage'

export default {
    props:{ //父传子
        storageUserInfo:{
            required:true
        }
    },
    data(){
        return {
            loading:true,
            //二维码图片
            qrImg:'',
            //是否显示遮罩
            showQrMask:false,
            //遮罩背景样式
            maskBg:{backgroundImage:`url(${scancodeImg})`},//扫描成功
           

        }
    },
    created(){
        //建立socket链接
        let io = socketIo('wss://chst.vip')
        // console.log(io)
        //监听链接的事件地址
        io.on('connectSuccess', ({sid})=>{
           //将sid存到本地
           storage.set('qf-sid',sid)
           this.getQrUrl(sid)
        })
        //无效二维码
        io.on('invalidCode',data=>{
            console.log(data)
            //展示遮罩
            this.showQrMask = true
            //显示无效的二维码遮罩样式
            this.maskBg.backgroundImage = `url(${invalidImg})`
        })
        //扫码成功
        io.on('scancodeSuccess',async({state,wechatCode,msg})=>{
            // console.log(data)
            //开启遮罩
            this.showQrMask = true
            this.maskBg.backgroundImage = `url(${scancodeImg})`
            if(state){
                //调用微信登录的接口
               let res = await api.wechatLoginApi(wechatCode)
            //    console.log(res)
               //将内容存到本地
               this.storageUserInfo(res.data)
                //跳转到页面
                this.$router.push('/')
            }else{
                console.error(msg)
            }
        })
    },
    
    methods:{
        
         //请求获取二维码地址
        async getQrUrl(sid){
          this.loading = true
          let res = await api.getQrCodeApi(sid)
          console.log(res)
           let {scanCodeUrl:qrcodeUrl} = res.data
           //通过qrcode插件，生成二维码 
           qrcode.toDataURL(qrcodeUrl,(err,img)=>{
            if(err){ 
                throw err
            }
            // console.log(img)
            this.qrImg = img
            //关掉遮罩
            this.showQrMask = false
            this.loading = false
           })
        },
        //更新二维码地址
        updataQr(){
            //获取本地存储的sid
            let sid =  storage.get('qf-sid')
            console.log(sid)
            this.getQrUrl(sid)
        }
    }
}
</script>
<style lang="less" scoped>
    .imgs{
        width: 200px;
        height: 200px;
        margin-left: 100px;
        position: relative;
       /deep/ .mask{
       
        // width:100%;
        // height: 100%;
        // background-repeat: no-repeat;
        width: 100%;
      height: 100%;
      opacity: 0.8;
      background-color: #fff;
      position: absolute;
      left: 0;
      // background-image: url("../../assets/img/scancode.png");
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;//小手

        

    }
    }
    .icon-wx{
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 148px;
        // cursor: pointer;//小手
    }
    .title{
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
}
  
</style>